<!--
 * @Author: coocase
 * @Date: 2021-03-10 14:48:03
 * @LastEditTime: 2021-05-11 23:00:44
 * @LastEditors: coocase
 * @Description: 登录
 * @FilePath: \git\dami\src\pages\login\login.vue
-->
<template>
  <div class="login-wrap">
    <Card class="login-card">
      <p slot="title" class="login-title">
        Hi!欢迎登录
      </p>
      <Form ref="formInline" :model="formInline" :rules="ruleInline">
        <FormItem prop="user">
            <Input class="login-input" type="text" v-model="formInline.user" placeholder="Username">
                <Icon type="ios-person-outline" slot="prepend"></Icon>
            </Input>
        </FormItem>
        <FormItem prop="password">
            <Input class="login-input" type="password" v-model="formInline.password" placeholder="Password">
                <Icon type="ios-lock-outline" slot="prepend"></Icon>
            </Input>
        </FormItem>
        <FormItem>
            <Button type="primary" @click="handleSubmit('formInline')">Signin</Button>
        </FormItem>
    </Form>
    </Card>
  </div>
</template>

<script>

export default {
  name: 'Login',
  data () {

    return {

          formInline: {
              user: '',
              password: ''
          },
          ruleInline: {
              user: [
                  { required: true, message: 'Please fill in the user name', trigger: 'blur' }
              ],
              password: [
                  { required: true, message: 'Please fill in the password.', trigger: 'blur' },
                  { type: 'string', min: 6, message: 'The password length cannot be less than 6 bits', trigger: 'blur' }
              ]
          }
      }
    },
    methods: {
       handleSubmit(name) {
            this.$refs[name].validate((valid) => {
                if (valid) {

                    this.$Message.success('Success!');
                    this.GLOBAL.hasLogin = true;
                    //通过路由把用户名传递给index
                    this.$router.push({  name: 'logined',params:{name:this.formInline.user}})
                } else {
                    this.$Message.error('Fail!');
                }
            })
        }
    },

    mounted(){

        // this.$http.getRequest({
        //   api: 'loginTest',
        //   data: {
        //     'id':'001'
        //   }
        // }).then((res) => {
        //   console.log(JSON.stringify(res.data))
        // }).catch((err) => {

        // });
    },
    updated: function () {
      console.log('login updated');
    }
}
</script>

<style scoped>
.login-input{
  width: 400px;
  margin-bottom: 10px;
}
.login-wrap{
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #e6e6e6;
}
.login-title{
  font-size: 30px;

  height: 45px;
  line-height: 49px;
}
.login-card{
  display: flex;
  justify-content: space-around;
  flex-direction: column;
  align-items: center;
  margin: 100px;
  width: 600px;
  height: 400px;
}

</style>
